<template>
	<view class="page-card-view">
		<view class="card-title">
			<view class="title">科普资料</view>
			<view class="more-btn" @click="navToTopNewsList('科普资料')">
				查看更多
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="tab-view">
			<v-tabs :bold="false" color="#383838" activeColor="#30B18D" lineHeight="1px" lineColor="#30B18D"
				activeFontSize="28rpx" fontSize="28rpx" :zIndex="0" v-model="popularScienceTabCurrent"
				:tabs="popularScienceTabTabs" field='name' @change="changePopularScienceTab">
			</v-tabs>
		</view>
		<view class="popula-science-materials-grid-view">
			<view class="popula-science-materials-grid-item" v-for="item in popularScienceList" :key="item.uid"
				@click="goDetails(item)">
				<image :src="item.coverFileName" class="cover-img"></image>
				<view class="bottom-view">
					<view class="title-and-date">
						<view class="title">{{item.titleName}}</view>
	
					</view>
					<view class="date">{{item.createTime}}</view>
					<!-- 	<view class="view-and-favorite">
						<view class="view">
							<image src="../../static/img/view_gray.png" mode="aspectFit"></image>
							<view class="text">1026</view>
						</view>
						<view class="favorite">
							<image src="../../static/img/favorite_gray.png" mode="aspectFit"></image>
							<view class="text">98</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as queryData from '../../common/api/index.js'
	export default {
		data() {
			return {
				popularScienceTabCurrent: 0,
				popularScienceTabTabs: [

        {
					name: '折页',
					uid: '41ec0c07789d4f13830f51c6c6ed707c'
				}, 
        {
					name: '展板',
					uid: 'cba521fd98f340d4b42352bf1cfff051'
				}, {
					name: '手册',
					uid: 'e4854691312d4ace8749388035ceb96e'
				}, 
        {
        	name: '海报',
        	uid: '5d809428ef2b467cba05e11d2b643db3'
        }, 
        {
					name: '视频',
					uid: 'dfb37316652f4109955d634297621225'
				}, 
        {
					name: '音频',
					uid: 'e6156a564ab54e16aaacb84025cf3261'
				}, {
					name: '宣传栏',
					uid: 'be0aa7f3f77e4b2b9cb5547fb1f9bb34'
				}, {
					name: '课件',
					uid: '5dd3ff9bb6ef4862bfe8c79b6b0cfad5'
				}, {
					name: '稿件',
					uid: '5c19949072614133bf5be32e40af2695'
				}, {
					name: '杂志',
					uid: '0987002399a04242bd339829fbed71f6'
				}, {
					name: '电子书',
					uid: 'f70227a5cc0d49d28e1865802625c172'
				}],
				popularScienceList: [],
			}
		},
		methods: {
			changePopularScienceTab(e) {
				this.popularScienceTabCurrent = e
				this.getPopularScienceList()
			},
			getPopularScienceList() {
				let item = this.popularScienceTabTabs[this.popularScienceTabCurrent]
				const param = {
					pageIndex: 1,
					pageSize: 4,
					positionsOne: '首页',
					classifyUid: item.uid
				}
				queryData.queryByPage(param).then(res => {
					this.popularScienceList = res.data.data.rows
				}).catch(error => {
					console.log(error)
				})
			},
			goDetails(data) {
				uni.navigateTo({
					url: "/pages/details/details?uid=" + data.uid
				})
			},
			navToTopNewsList(e) {
				uni.navigateTo({
					url: "/pages/popularization/popularization"
				})
			},
		},
		mounted() {
			this.getPopularScienceList()
		}
	}
</script>

<style lang="scss" scoped>
	.page-card-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;
	
		.card-title {
			width: 100%;
			display: flex;
			padding: 30rpx;
			box-sizing: border-box;
			align-items: center;
	
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #383838;
				flex: 1;
			}
	
			.more-btn {
				display: flex;
				font-size: 24rpx;
				color: #808080;
			}
		}
	}
	.popula-science-materials-grid-view {
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(auto-fit, calc(100% / 2 - 20rpx));
		grid-template-rows: repeat(auto-fit, 320rpx);
		grid-row-gap: 20rpx;
		grid-column-gap: 20rpx;
	
		.popula-science-materials-grid-item {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			overflow: hidden;
			background: white;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
	
			.cover-img {
				width: 100%;
				height: 230rpx;
			}
	
			.bottom-view {
				width: 100%;
				display: flex;
				flex-direction: column;
	
				.title-and-date {
					width: 100%;
					display: flex;
					justify-content: space-around;
	
					.title {
						width: 480rpx;
						font-size: 24rpx;
						color: #303133;
						font-weight: bold;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
					}
				}
				.date {
					font-size: 20rpx;
					color: #808080;
					text-align: right;
				}
			}
	
			.view-and-favorite {
				display: flex;
				color: #A6A6A6;
				font-size: 20rpx;
				padding-left: 10rpx;
	
				image {
					width: 20rpx;
					height: 20rpx;
				}
	
				.view {
					display: flex;
					align-items: center;
				}
	
				.favorite {
					display: flex;
					margin-left: 20rpx;
					align-items: center;
				}
	
				.text {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>